<%--
  Created by IntelliJ IDEA.
  User: 吴超
  Date: 2022/4/28
  Time: 09:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
span{
    color: red;
    font-size: 33px;
}
    </style>
    <script src="../js/jquery.js"></script>
</head>
<body>
账户<input type="text" name="name" id="name"><span id="sp1"></span><br/>
密码<input type="text" name="pwd" id="pwd"><span id="sp2"></span><br/>
模糊异步查询<input type="text" name="user" id="user">
<input type="button" value="点我异步模糊查询" id="bt"><br/>
<ul id="ul"></ul>
<hr/>
<ul id="ul1"></ul>
<ul id="ul2"></ul>
<ul id="ul3"></ul><ul id="ul4"></ul>
<script>
    //泛型list 不能够普通回来，至少要是json格式
    $("#bt").click(function () {
        $("#ul").html("");
        var user=$("#user").val();
        //下一章
        $.getJSON(//地址值 ，回调走2 ，返回值类型
            "${pageContext.request.contextPath}/ServletAjax?op=find&user="+user,
            function (data) {
                $.each(data,function () {
                    var li="<li>"+this.id+"..."+this.name+"</li>";
                    $("#ul").append(li);
                });
            }
        );
    });







//json
var jarr1=["超哥","朱朱","乐乐"];//js的写法
var jarr2={"name":"超哥","age":32};//普通json
var jarr3=[{"name":"超哥1","age":32},{"name":"超哥2","age":32},{"name":"超哥3","age":32}];//最强json -泛型list<User>--超级对象数组
//js 变 jq
var $jarr1=$(jarr1);
$.each($jarr1,function () {
    var li="<li>"+this+"</li>";
    $("#ul1").append(li);
});
//$.each();
var $jarr2=$(jarr2);//你司马，要我变
$.each($jarr2,function () {
    var li="<li>"+this.name+"</li>";
    $("#ul2").append(li);
});
$.each(jarr3,function () {
    var li="<li>"+this.name+"</li>";
    $("#ul3").append(li);
});
for(var i=0;i<jarr3.length;i++){
    var li="<li>"+"ul4"+jarr3[i].name+"</li>";
    $("#ul4").append(li);
}

    $("#pwd").blur(function () {
        $("#sp2").html("");
        var text=$("#pwd").val();
        $.ajax({
            url:"${pageContext.request.contextPath}/ServletAjax?op=login1&text="+text,
            type:"get",
            dataType:"text",
            success:function (data) {
                    if(data.trim()=="y"){
                        $("#sp2").html("*对不起名字已被注册.请重新输入");
                    }else{
                        $("#sp2").html("*恭喜您,改昵称可以被注册");
                    }
                }
            ,error:function() {
                $("#sp2").html("异步错误");
            }
        });
    });

    $("#name").blur(function () {
    $("span").html("");
    var text=$("#name").val();
    var xml=new XMLHttpRequest();//创建异步引擎
    //把异步地址和值合并
    var url="${pageContext.request.contextPath}/ServletAjax?op=login&text="+text;
    //开启异步引擎
    xml.open("get",url,true);//数据最好接送格式
    //发送数据
    xml.send(null);
    //设置回调函数
    xml.onreadystatechange=callback;//这里是声明，不是调用
    //执行回调函数
    function callback() {
        if(xml.status==200&&xml.readyState==4){
            var data=xml.responseText;
            if(data.trim()=="y"){
                $("span").html("*对不起名字已被注册.请重新输入");
            }else{
                $("span").html("*恭喜您,改昵称可以被注册");
            }
        }
    }
});


</script>
</body>
</html>
